<!--  -->
<template>
  <div class="editable-cell" :class="required ? 'requiredFormItem' : ''">
    <a-input :value="text" @change="handleChange" :type='type' :maxLength="maxLength" :placeholder="disabled ? '' : '请输入'" :disabled="pageType === 'look' || disabled" />
    <!-- <a-textarea :value="text" @change="handleChange" :maxLength="maxLength" :placeholder="disabled ? '' : '请输入'" :disabled="pageType === 'look' || disabled" :autosize="autosize" /> -->
  </div>
</template>

<script>
export default {
  name: 'EditableCell',
  props: {
    text: String | Number,
    pageType: String,
    maxLength: {
      type: Number,
      default: 20
    },
    required: {
      type: Boolean,
      defalut: false
    },
    disabled: {
      type: Boolean,
      defalut: false
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      autosize: {
        minRows: 1
      }
    }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    handleChange(e) {
      const value = e.target.value
      this.$emit('change', value)
    }
  }
}
</script>
<style lang='less' scoped>
// /deep/ .ant-input {
//   border: none;
// }
</style>